<!--
* Copyright (c) 2025 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
*     http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
-->

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8">
    <style>
        body {
          font-family: Arial, Helvetica, sans-serif, sans-serif;
          text-align: center;
          background-color: #f2f2f2;
          padding: 20px;
        }
        #image {
          display: none;
          max-width: 100%;
          height: auto;
          margin-top: 15px;
        }
        #image_preview {
          display: none;
          margin-top: 15px;
        }
    </style>
</head>

<body>
  <script>
    // 显示ArkTS返回的图片
    function showPic() {
      // input标签的onchange事件触发时，返回的的描述事件所有相关信息的对象，此处接收ArkTS中onShowFileSelector接口的返回结果
      let event = this.event;
      let tFile = event ? event.target.files : [];
      // 如果返回的图片列表是空的，则不显示
      if (tFile === 0) {
        document.getElementById('image_preview').style.display = 'block';
        document.getElementById('image_preview').innerHTML = '未选择图片';
        return;
      }
      document.getElementById('image').setAttribute('src', URL.createObjectURL(tFile[0]));
      document.getElementById('image_preview').style.display = 'block';
      document.getElementById('image').style.display = 'block';
    }

    function sharePic() {
      shareObject.share();
    }
  </script>
  <input ref="camera" type="file" id="upload" name="upload" accept="image/*" capture="upload" onchange="showPic()"/>
  <button onclick="sharePic()">分享图片</button>
  <p id="image_preview">图片预览</p>
  <img id="image">
</body>

</html>